@charset "utf-8";

@function vw($a){
    @return ( $a / 320 ) * 100vw;
}

body{
    overflow: hidden;
}
#choujiang-web{
    background: url(../img/index-bg1.jpg);
    background-size: 100% 100%;
    overflow: hidden;
}

.choujiang-box{
    position: absolute;
    top: 3%;
    left: vw(26.25);
    width: vw(267.5);
    height: vw(393);
    animation: shangxia 10s infinite;
    img{
        width: 100%;
        height: 100%;
    }
}
.choujiang-boxa{
    animation:scale-out-center .5s cubic-bezier(.55,.085,.68,.53) both;
}

@keyframes shangxia{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-30px);
    }
    100%{
        transform: translateY(0);
    }
}


@keyframes scale-out-center{
    0%{
        transform:scale(1);
        opacity:1;
    }
    30%{
        opacity: 1;
    }
    100%{
        transform:scale(0);
        opacity:0;
    }
}

.choujiang-jiantou{
    position: absolute;
    top: vw(380);
    left: vw(152);
    width: vw(16);
    height: vw(31);
    animation: jiantou 2s infinite;
    img{
        width: 100%;
        height: 100%;
    }
}
@keyframes jiantou{
    0%{
        transform: translateY(vw(20));
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    75%{
        opacity: 1;
    }
    100%{
        transform: translateY(vw(-20));
        opacity: 0;
    }
}
.shitou{
    position: absolute;
    img{
        width: 100%;
        height: 100%;
    }
}
@keyframes feixing{
    0%{
        transform: translateY(20px) translateX(50px);
    }
    100%{
        transform: translateY(-20px) translateX(-450px);
    }
}
.shitou1{
    top: vw(160);
    right: vw(20);
    width: vw(30);
    height: vw(24);
    animation: feixing 15s infinite;
}

@keyframes feixing2{
    0%{
        transform: translateY(-20px) translateX(-60px);
    }
    100%{
        transform: translateY(50px) translateX(450px);
    }
}
.shitou2{
    top: vw(55);
    left: vw(45);
    width: vw(52);
    height: vw(41.5);
    animation: feixing2 16s infinite;
}


@keyframes feixing3{
    0%{
        transform: translateY(0) translateX(-50px);
    }
    100%{
        transform: translateY(250px) translateX(200px);
    }
}
.shitou3{
    top: vw(320);
    left: vw(20);
    width: vw(46.5);
    height: vw(83.5);
    animation: feixing3 18s infinite;
}

@keyframes feixing4{
    0%{
        transform: translateY() translateX(0);
    }
    100%{
        transform: translateY(-20px) translateX(-50px);
    }
}
.shitou4{
    bottom: vw(20);
    right: vw(20);
    width: vw(82.5);
    height: vw(154);
    animation: feixing4 18s infinite;
}

.choujiang-text{
    position: absolute;
    top: vw(420);
    left: 32%;
    p{
        font-size: vw(11);
        text-align: center;
        line-height: vw(18);
    }
}


//中奖
.zhongjiang{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: 1.5s;
    .zhongjiang-text{
        position: absolute;
        top: 20%;
        left: 26%;
        .redC{
            font-size: vw(15);
            margin-bottom: 5px;
        }
        .blueC{
            font-size: vw(11);
        }
    }
    .zhongjiang-jiantou{
        position: absolute;
        width: vw(16);
        height: vw(31);
        top: 30%;
        left: vw(152);
        transform: rotateZ(180deg);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .zhongjiang-jiang{
        position: absolute;
        width: vw(319);
        height: vw(352.5);
        top: 21%;
        left: 0;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .xiayiguan{
        transform: translateX(100%);
        opacity: 0;
        transition: 2s;
        li .page3-you:first-of-type{
            left: 12%;
            top: 34%;
        }
        li .page3-you:nth-of-type(2){
            left: 15%;
            top: 34%;
        }
        li .page3-you:nth-of-type(3){
            right: 47%;
            top: 34%;
        }
        li .page3-you:nth-of-type(4){
            right: 50%;
            top: 34%;
        }
    }
    .xiayiguana{
        transform: translateX(0);
        opacity: 1;
    }
}

.zhongjianga{
    transform: scale(1);
}

